﻿<div id="Content-Body" style="min-width:1000px;">
    <div class="toggle toggle-filter" resource="Elements-Table,Elements-Table-Paging">
        <span class="data-fill" resource="Elements-Table-Paging">共 @Total 条数据</span>

        <button value="" class="item active">所有元素</button>
    </div>

    <div class="tools">
        <!--<input type="button" class="button right super-search" resource="Elements-Table" value="高级搜索" />-->
        <form class="filter right" resource="Elements-Table,Elements-Table-Paging">
            <input class="left w280 input" type="text" name="[Fuzzy]UserName_c,[ORFuzzy]Contact,[ORFuzzy]ShopName" placeholder="搜索登录名，联系人或店铺名称..." /><input type="submit" class="right button" value="Q" />
        </form>

        <input type="button" class="tool button refresh" resource="Elements-Table" value="刷新" />
        <input type="button" class="tool button insert" resource="Elements-Table" frame="TempElementFrame" command="InsertElement" value="新增" />
        <input type="button" class="tool button update" resource="Elements-Table" frame="TempElementFrame" command="UpdateElement" value="修改" />
        <input type="button" class="tool button delete" resource="Elements-Table" command="DeleteElement" value="删除" />
    </div>

    <div class="table-box">
        <table class="table" id="Elements-Table" command="ReadPageElements" parameters="Begin:1,End:12,DefaultOrders:'DId'">
            <thead>
                <tr>
                    <td name="selection" style="width:30px;"><input type="checkbox" /></td>
                    <td class="sort" name="Id" style="width:30px;">Id</td>
                    <td class="sort" name="Name" style="width:80px;">名称</td>
                    <td class="sort" name="Type" style="width:80px;">类型</td>
                    <td class="sort" name="Value" style="width:120px;">值</td>
                    <td class="sort" name="Title" style="width:120px;">标题</td>
                    <td class="sort" name="Url" style="width:120px;">Url</td>
                    <td name="operation" style="width:80px;" renderer="return Renderers.details('TempElementFrame')">详情</td>
                </tr>
            </thead>
        </table>
    </div>

    <div id="Elements-Table-Paging" command="GetElementsTotal" resource="Elements-Table"></div>

    <form id="TempElementFrame" text="元素信息" class="frame temp" onsubmit="return app.frameSubmit(this)" style="width:600px; height:800px;margin-left:-300px;margin-top:-400px;">
        <div class="top">
            <span class="title">查看元素信息</span>
            <div class="right">
                <span class="min" title="最小化"></span>
                <span class="max" title="最大化"></span>
                <span class="close" title="关闭"></span>
            </div>
        </div>
        <div class="content" readonly-where="data.Readonly">
            <div class="content">
                <span class="title">账户信息</span>
                <input type="hidden" name="Id" />
                <div class="item">
                    <label class="text">*元素类型：</label>
                    <select verify="notNull" name="Type" class="input w320" placeholder="元素类型">
                        <option value=""> -- 未选择 -- </option>
                    </select>
                </div>
                <br />
                <div class="item">
                    <label class="text">*元素名称：</label>
                    <input verify="notNull" class="input w320" type="text" name="Name" placeholder="元素名称" />
                </div>
                <br />
                <div class="item">
                    <label class="text">*元素值：</label>
                    <div id="ValueBox" class="inline-block">
                        <input verify="notNull" class="input w320" type="text" name="Value" placeholder="元素值" />
                    </div>
                </div>
                <br />
                <div class="item">
                    <label class="text">元素标题：</label>
                    <input class="input w320" type="text" name="Title" placeholder="元素标题" />
                </div>
                <br />
                <div class="item">
                    <label class="text">Url：</label>
                    <input class="input w320" type="text" name="Url" placeholder="Url" />
                </div>
                <!--
    <div class="item">
        <label class="text">*元素值：</label>
        <input class="image" name="Avatar" verify="notNull" style="width: 200px; height: 200px;" placeholder="元素值" />
    </div>
    <br />
    -->
            </div>
        </div>
        <div class="bottom">
            <input type="submit" class="button" value="保存修改" display-where="!data.Readonly" />
            <input type="button" class="button close" value="返回" />
        </div>
    </form>

    <script>
        $("#TempElementFrame").on("show", function (e, Data) {
            // app.control($(this).find(".list"), "list");
            // app.control($(this).find(".image"), "imageUpload");

            var frame = $(this);



            var typeElement = $(this).find("select[name=Type]");

            var types = {
                Image: function (frame) {
                    var valueBox = frame.find("#ValueBox");

                    valueBox.find("*").remove();

                    valueBox.append($("<input>").addClass("image").attr("name", "Value").attr("verify", "notNull").width(300).height(300).attr("placeholder", "图像值"));

                    app.control(valueBox.find(".image"), "imageUpload");
                }
            };

            for (var name in types) {
                var option = $("<option>").val(name).text(name);

                typeElement.append(option);
            }
            
            typeElement.change(function () {
                var func = types[$(this).val()];

                if (typeof func == "function") {
                    func(frame);
                }
            });

        });

        $("#TempElementFrame").on("process", function (e, Data) {
        });

        $("#TempElementFrame").on("apply", function (e, Data) {
        });

        $.extend(window, {
            TypeChange: function (element) {
            }
        });

        app.control($("#Elements-Table"), "table");
        app.control($("#Elements-Table-Paging"), "paging");
        app.control($("#Content-Body"), "content");
    </script>
</div>